<template>
  <div class="theme-toggle">
    <el-button
      :icon="isDark ? Sunny : Moon"
      circle
      :type="isDark ? 'warning' : 'info'"
      @click="toggleTheme"
      :title="isDark ? '切换为亮色主题' : '切换为暗黑主题'"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useThemeStore } from '../stores/theme'
import { Moon, Sunny } from '@element-plus/icons-vue'

const themeStore = useThemeStore()
const isDark = computed(() => themeStore.isDark)

const toggleTheme = () => {
  themeStore.toggleTheme()
}
</script>

<style scoped>
.theme-toggle {
  display: inline-flex;
  align-items: center;
}
</style>

